<app-header-plugins></app-header-plugins>
<link rel="stylesheet" href="swiper-bundle.min.css">
<script src="swiper-bundle.min.js"></script>
<!-- <section class="container" *ngFor="let plugins of pluginList.plugins" >
    <div class="box-1">
        <h1>{{ plugins.plugin_name }}</h1>
        <p>{{ plugins.plugin_detail }}</p>
        <h2>${{ plugins.price }}</h2>
        <button>Download</button>
    </div>
    <div class="box-2">
        <h1 class="img"><img src="../../../assets/images/logo guitar-plug.png" alt=""></h1>
    </div>
</section> -->
<section class="main swiper mySwiper">
    <div class="wrapper swiper-wrapper">
        <div class="slide swiper-slide" *ngFor="let plugins of pluginList.plugins">
            <img src="../../../assets/images/background1.png" alt="" class="image">
            <div class="image-data">
                <div class="box-box1">
                    <span class="text">{{ plugins.plugin_name }} <span class="headPlugins">Plugins</span>
                    </span><br><br>
                    <p>{{ plugins.plugin_detail }}</p><br>
                    <h2>$ {{ plugins.price }}</h2><br>
                    <span class="Labeltext">
                        <span id="card-1">Free</span>
                        <span id="card-2">No License Reqeuired</span>
                    </span><br>
                    <span *ngIf="accesstoken == null">
                        <button class="button" (click)="getItemAccesstoken()">Download</button>
                    </span>
                    <span *ngIf="accesstoken != null">
                        <a href="../../../assets/plugins_vst3/{{ plugins.folder_dowload }}" download><button class="button" (click)="qualityDowload()">Download</button></a>
                    </span>
                </div>
                <div class="box-box2">
                    <img src="../../../assets/images/{{ plugins.image_url }}" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- Add pagination controls -->
    <div>
        <button (click)="prevPage()" [disabled]="currentPage === 1">Previous</button>
        <span>Page {{ currentPage }}</span>
        <button (click)="nextPage()" [disabled]="endIndex >= pluginList.plugins.length">Next</button>
    </div>
    <!-- 
    <div class="swiper-button-next nav-btn"></div>
    <div class="swiper-button-prev nav-btn"></div>
    <div class="swiper-pagination"></div> -->
</section>


<!-- <div id="home">
    <div id="slider">
        <input type="radio" name="slider" id="slide1" checked>
        <input type="radio" name="slider" id="slide2">
        <div id="slides">
            <div id="overflow">
                <div class="inner">
                    <div class="slide slide_1">
                        <div class="section-container">
                            <span class="content-1">
                                <h1 class="headName">Guitar <span class="headPlugins">Effect plugins</span></h1>
                                <p>เอฟเฟคเสียงแตกที่ให้ซาวด์ธรรมชาติ ควบคุมง่ายด้วยสี่ลูกบิดที่ตรงตัว สามารถปรับทั้งโวลุ่ม ระดับเสียงแตก ผสม และเปิด-ปิดได้ตามความต้องการ</p>
                                <h1 class="dollar">$0</h1>
                                <span class="free">Free</span>
                                <span class="free">No License Required</span><br>
                                <span *ngIf="accesstoken == null">
                                    <button class="button">
                                        <span class="button-content" (click)="getItemAccesstoken()">Download</span>
                                    </button>
                                </span>
                                <span *ngIf="accesstoken != null">
                                    <button class="button" (click)="qualityDowload()">
                                        <a href="../../../assets/plugins_vst3/Stream-JUCE-Intro.vst3.rar" download=""
                                            class="a-del"><span class="button-content">Download</span></a>
                                    </button>
                                </span>
                            </span>
                            <span class="content-2">
                                <img src="../../../assets/images/gui2.png" alt="Logo Plugins">
                            </span>
                        </div>
                    </div>
                    <div class="slide slide_2">
                
                        <div class="section-container">
                            <span class="content-1">
                                <h1 class="headName">3D <span class="headPlugins">Effect plugins</span></h1>
                                <p>เป็นระบบเสียงเซอร์ราวนด์ที่ให้สนามเสียงวนรอบตัวเราในแนวระนาบเดียว มิติด้านกว้าง (ซ้าย–ขวา)</p>
                                <h1 class="dollar">$0</h1>
                                <span class="free">Free</span>
                                <span class="free">No License Required</span><br>
                                <span *ngIf="accesstoken == null">
                                    <button class="button">
                                        <span class="button-content" (click)="getItemAccesstoken()">Download</span>
                                    </button>
                                </span>
                                <span *ngIf="accesstoken != null">
                                    <button class="button" (click)="qualityDowload()">
                                        <a href="../../../assets/plugins_vst3/X-Y-PAD.vst3.rar" download=""
                                            class="a-del"><span class="button-content">Download</span></a>
                                    </button>
                                </span>
                            </span>
                            <span class="content-2">
                                <img src="../../../assets/images/boom3.png"
                                    alt="">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="controls">
            <label for="slide1"></label>
            <label for="slide2"></label>
        </div>
        <div id="bullets">
            <label for="slide1"></label>
            <label for="slide2"></label>
        </div>
    </div>
</div> -->


<div class="recom-box-1">
    <span class="recom-text-1">
        <h1>NEW PLUGINS</h1>
    </span>
    <span class="container-recom">
        <span class="recom-text-2">
            <h1>GUITAR PLUGINS</h1>
            <p>- ประเภท Overdrive<br>
                - เอฟเฟคเสียงแตกที่ให้ซาวด์ธรรมชาติ
            </p>
            <span><label>1.0.0</label></span>
        </span>
        <span class="recom-text-3">
            <h1>SOUND PLUGINS</h1>
            <p>- ประเภท 3D<br>
                - ปรับเสียงที่เหมือนจริงมากขึ้น
            </p>
            <span><label>1.0.0</label></span>
        </span>
    </span>
</div>
<div class="plugin-detail" id="plugin-detail">
    <h1 class="plugin-head">ปลั๊กอิน <span class="plugin-text">คืออะไร</span></h1>
    <p class="detail">โปรแกรมเสริมชนิดหนึ่ง ที่จะเพิ่มความสามารถให้กับโปรแกรมหลัก ซึ่งเราจะติดตั้งเพื่อใช้งาน
        หรือไม่ติดตั้งก็ได้ โดย Plugin ถูกออกแบบให้มีความสามารถเฉพาะอย่าง
        ซึ่งเป็นความสามารถเสริมที่ช่วยให้โปรแกรมหลักทำงานได้ดีขึ้น เช่นช่วยเพิ่มลูกเล่นต่างๆให้โปรแกรมหลัก</p>
    <span class="pic-text" *ngFor="let plugins of pluginList.plugins">
        <img src="../../../assets/images/{{ plugins.image_url }}">
        <span class="box-text-newplugins">
            <h1>{{ plugins.plugin_name }}</h1>
            <p>เ{{ plugins.plugin_detail }}</p>
        </span>
    </span>
</div>
<!-- <div class="plugin-detail-reverse">
    <span class="pic-text-reverse">
        <span class="box-text-newplugins">
            <h1>3D PLUGINS</h1>
            <p>ระบบเสียงเซอร์ราวนด์ที่ให้สนามเสียงวนรอบตัวเราในแนวระนาบเดียว</p>
        </span>
        <img src="../../../assets/images/brand1.png" alt="plugin sound effect">
    </span>
</div>--><br><br> 
<section>
    <footer>
        <h1>Contact Us</h1>
        <p>ถ้าคุณมีข้อสงสัยหรือต้องการติดต่อ สามารถติดต่อเพิ่มเติมได้ที่ Icon ด้านล่างนี้ได้เลย</p>
        <span>
            <a href="https://www.instagram.com/kitsanapol_au/" target="_blank"><img
                    src="../../../assets/images/instagram-icon.png" alt=""></a>
            <a href="https://www.facebook.com/profile.php?id=100004055963277" target="_blank"><img
                    src="../../../assets/images/facebook_icon.png" alt=""></a>
            <a href="https://mail.google.com/mail/u/0/?pli=1#inbox?compose=GTvVlcSGMGSsKwcZqKgcVkGPvKvpPtdbXCPXFWsKcXhbnNxVDGDDrtWgMVWlmLhjJKQVBKhsXWZdJ"
                target="_blank"><img src="../../../assets/images/google-icon.png" alt=""></a>
        </span>
    </footer>
</section>